<template>
  <view class="warp">
    <image
      style="width: 100%"
      src="https://ojqn.wm2177.com/wechat_imgs/rank/top-bg.png "
      mode="widthFix"
    ></image>
    <view
      class="time_box"
      style="font-size: 24rpx; text-align: center; width: 100%"
    >
      当前统计时间：{{ returntimeTxt(data.start) }} -
      {{ returntimeTxt(data.end) }}
    </view>
    <view class="three_box" v-if="data">
      <view class="second">
        <image
          class="icon"
          src="https://ojqn.wm2177.com/wechat_imgs/rank/second-icon.png"
          mode="widthFix"
        ></image>
        <view class="user">
          <image :src="data.data_three[1].himg" mode="widthFix"></image>
        </view>
        <view class="name">
          {{ data.data_three[1].nickname.substring(0, 1) + '****' }}</view
        >
      </view>
      <view class="first">
        <image
          class="icon"
          src="https://ojqn.wm2177.com/wechat_imgs/rank/first-icon.png"
          mode="widthFix"
        ></image>
        <view class="user">
          <image :src="data.data_three[0].himg" mode="widthFix"></image>
        </view>
        <view class="name">
          {{ data.data_three[0].nickname.substring(0, 1) + '****' }}</view
        >
      </view>
      <view class="third">
        <image
          class="icon"
          src="https://ojqn.wm2177.com/wechat_imgs/rank/third-icon.png"
          mode="widthFix"
        ></image>
        <view class="user">
          <image :src="data.data_three[2].himg" mode="widthFix"></image>
        </view>
        <view class="name">
          {{ data.data_three[2].nickname.substring(0, 1) + '****' }}</view
        >
      </view>
    </view>
    <view class="rank_line" style="margin-top: 100rpx">
      <image
        style="width: 172rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/rank/second.png"
        mode="widthFix"
      ></image>
      <image
        style="width: 206rpx; margin: 0 32rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/rank/first.png"
        mode="widthFix"
      ></image>
      <image
        style="width: 172rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/rank/third.png"
        mode="widthFix"
      ></image>
    </view>
    <view class="list_box" v-if="data">
      <view class="list_item" v-for="(item, index) in data.data" :key="index">
        <view class="" style="display: flex; align-items: center">
          <view
            class=""
            style="font-size: 28rpx; width: 56rpx; text-align: left"
          >
            {{ item.pai }}
          </view>
          <view
            class="icon_box"
            style="width: 106rpx; height: 106rpx; margin: 0 16rpx"
          >
            <image :src="item.himg" mode="widthFix"></image>
            <!--  <view
              v-if="userCodeStore.usercode.user == item.user_id"
              class="is_my"
            >
              我的排名
            </view> -->
          </view>
          <view class="name" style="font-size: 28rpx">
            {{ item.nickname.substring(0, 1) + '****' }}
          </view>
        </view>
        <view> {{ item.sum_money }} </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import Api from './api/index.js'
  const __Api = new Api()
  import dayjs from 'dayjs'
  import { useUsercodeStore } from '@/store/usercode.js'
  const userCodeStore = null
  onLoad(() => {
    userCodeStore = useUsercodeStore()
    init()
  })
  const data = ref(null)
  function init() {
    __Api.rankinglist().then((res) => {
      if (res.st == 1) {
        data.value = res
      }
    })
  }
  function returntimeTxt(item) {
    return dayjs(item * 1000).format('MM/DD HH:mm')
  }
</script>

<style scoped lang="less">
  .list_box {
    position: absolute;
    left: 50%;
    margin-left: -335rpx;
    bottom: 128rpx;
    width: 670rpx;
    height: 446rpx;
    border-radius: 28rpx;
    opacity: 1;
    background: rgba(255, 255, 255, 0.32);
    border: 2px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(31px);
    .list_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 40rpx;
      box-sizing: border-box;
      .icon_box {
        position: relative;
        image {
          width: 106rpx;
          // height: 106rpx;
          border: 2rpx solid #ffe60f;
          border-radius: 100%;
        }
        .is_my {
          font-size: 16rpx;
          width: 86rpx;
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          margin-left: -43rpx;
          text-align: center;
          height: 28rpx;
          line-height: 28rpx;
          border-radius: 18rpx;
          opacity: 1;
          background: linear-gradient(99deg, #fce83c 14%, #f9f0a2 87%);
        }
      }
    }
  }
  .three_box {
    display: flex;
    position: absolute;
    top: 380rpx;
    .name {
      position: absolute;
      bottom: -50rpx;
      width: 100%;
      text-align: center;
      font-size: 24rpx;
      font-weight: 600;
    }
    .first {
      position: relative;
      margin: 0 60rpx;
      width: 188rpx;
      height: 188rpx;
      .icon {
        position: absolute;
        width: 149rpx;
        top: -66rpx;
        right: -34rpx;
      }
      .user {
        width: 188rpx;
        height: 188rpx;
        border-radius: 100%;
        border: 6rpx solid #feea79;
        position: absolute;
        overflow: hidden;
        image {
          width: 100%;
        }
      }
    }
    .second {
      width: 132rpx;
      height: 132rpx;
      position: relative;
      margin-top: 100rpx;
      .icon {
        position: absolute;
        width: 113rpx;
        top: -46rpx;
        right: -34rpx;
      }
      .user {
        width: 132rpx;
        height: 132rpx;
        border-radius: 100%;
        border: 6rpx solid #c8cbcb;
        position: absolute;
        overflow: hidden;
        image {
          width: 100%;
        }
      }
    }
    .third {
      width: 132rpx;
      height: 132rpx;
      position: relative;
      margin-top: 100rpx;
      .icon {
        position: absolute;
        width: 113rpx;
        top: -46rpx;
        right: -34rpx;
      }
      .user {
        width: 132rpx;
        height: 132rpx;
        border-radius: 100%;
        border: 6rpx solid #d79947;
        position: absolute;
        overflow: hidden;
        image {
          width: 100%;
        }
      }
    }
  }

  .time_box {
    position: absolute;
    width: 100%;
    top: 180rpx;
  }
  .warp {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    padding-bottom: 100rpx;
    box-sizing: border-box;
    position: relative;
    background-image: linear-gradient(
      to bottom,
      #f8ec8a 1%,
      #f9ed8b 5%,
      #ffefff 36%,
      #eaf7ff 70%,
      #ffffff 100%
    );
    background-size: 100%;
  }
</style>